<!-- 角色的分配菜单 -->
<template>
  <div class="breadcrumb-style">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/ums/admin' }">权限</el-breadcrumb-item>
      <el-breadcrumb-item>分配菜单</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="box">
    <el-tree
      :data="data"
      :props="defaultProps"
      :show-checkbox="true"
      node-key="id"
      :default-expanded-keys="data"
      :default-checked-keys="data"
    />
    <div class="button">
      <el-button @click="clearBtn">清空</el-button>
      <el-button @click="onConfirm" type="primary">保存</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { resource } from "@/request/api";
import { ref } from "vue";
resource.AllocMenu().then((res) => {
  // console.log(res);
  let newData = res.map((el) => {
    if (el.children !== null) {
      let newData2 = el.children.map((ell) => {
        return {
          id: ell.id,
          label: ell.title,
        };
      });
      // console.log(el);
      return {
        id: el.id,
        label: el.title,
        children: newData2,
      };
    } else {
      return {
        id: el.id,
        label: el.title,
        children: [],
      };
    }
  });
  data.value = newData;
});

const defaultProps = {
  children: "children",
  label: "label",
  disabled: "disabled",
};
const data = ref([]);
// 取消
let clearBtn = () => {
  // console.log(1);
};

// 保存
let onConfirm = () => {
  // console.log(1);
};
</script>

<style scoped>
.breadcrumb-style {
  width: 100%;
  height: 30px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.box {
  width: 95%;
  height: 100%;
  padding: 20px;
  margin: 20px 0;
  flex-wrap: wrap;
  border: 1px solid #ebeef5;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.button {
  text-align: center;
}
</style>
